<template>
  <div class="assessment-table-container">
    <b>评分增加跌倒风险评估单（约翰霍普金斯法）</b>
    <table class="assessment-table">
      <thead>
        <tr>
          <th >条目</th>
          <th>内容</th>
          <th >分数</th>
        </tr>
      </thead>
      <tbody>
        <template v-for="(item, index) in filteredArray" :key="index">
          <!-- 处理每个主条目及其子项 -->
          <tr v-for="(detail, detailIndex) in item.normalDetailList" :key="detail.id">
            <!-- 只在第一个子项显示主标题 -->
            <td v-if="detailIndex === 0" :rowspan="item.normalDetailList.length" class="main-title">
              {{ item.title }}
            </td>
            <td>{{ detail.detailContent }}</td>
            <td class="score-cell">{{ detail.score }}</td>
          </tr>
        </template>
      </tbody>
    </table>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  props: {
    filteredArray: {
      type: Array,
      required: true,
      default: () => [
           {
        "title": "年龄",
        "key": "年龄",
        "align": "center",
        "width": "",
        "normalDetailList": [
            {
                "id": "1942123164368633856",
                "pgId": "1942123164263776256",
                "pgSrxId": "1942123164360245248",
                "detailTypeCode": "文字",
                "detailContent": "60—69岁",
                "score": 1,
                "shortName": "",
                "rangeStart": 0,
                "rangeEnd": 0,
                "desc": null,
                "order": null
            },
            {
                "id": "1942123164381216768",
                "pgId": "1942123164263776256",
                "pgSrxId": "1942123164360245248",
                "detailTypeCode": "文字",
                "detailContent": "70—79岁",
                "score": 2,
                "shortName": null,
                "rangeStart": 0,
                "rangeEnd": 0,
                "desc": null,
                "order": null
            },
            {
                "id": "1942123164389605376",
                "pgId": "1942123164263776256",
                "pgSrxId": "1942123164360245248",
                "detailTypeCode": "文字",
                "detailContent": "≥80岁",
                "score": 3,
                "shortName": null,
                "rangeStart": 0,
                "rangeEnd": 0,
                "desc": null,
                "order": null
            }
        ],
        "detailId": "1942123164381216768"
    },
    {
        "title": "跌倒史",
        "key": "跌倒史",
        "align": "center",
        "width": "",
        "normalDetailList": [
            {
                "id": "1942123164410576896",
                "pgId": "1942123164263776256",
                "pgSrxId": "1942123164402188288",
                "detailTypeCode": "文字",
                "detailContent": "最近6个月跌倒经历",
                "score": 5,
                "shortName": "",
                "rangeStart": 0,
                "rangeEnd": 0,
                "desc": null,
                "order": null
            }
        ],
        "detailId": "1942123164410576896"
    },
    {
        "title": "排泄，排便和排尿",
        "key": "排泄，排便和排尿",
        "align": "center",
        "width": "",
        "normalDetailList": [
            {
                "id": "1942123164439937024",
                "pgId": "1942123164263776256",
                "pgSrxId": "1942123164423159808",
                "detailTypeCode": "文字",
                "detailContent": "失禁",
                "score": 2,
                "shortName": "",
                "rangeStart": 0,
                "rangeEnd": 0,
                "desc": null,
                "order": null
            },
            {
                "id": "1942123164448325632",
                "pgId": "1942123164263776256",
                "pgSrxId": "1942123164423159808",
                "detailTypeCode": "文字",
                "detailContent": "紧迫或频繁的排泄",
                "score": 2,
                "shortName": null,
                "rangeStart": 0,
                "rangeEnd": 0,
                "desc": null,
                "order": null
            },
            {
                "id": "1942123164460908544",
                "pgId": "1942123164263776256",
                "pgSrxId": "1942123164423159808",
                "detailTypeCode": "文字",
                "detailContent": "失禁且紧急/频繁的排泄",
                "score": 4,
                "shortName": null,
                "rangeStart": 0,
                "rangeEnd": 0,
                "desc": null,
                "order": null
            }
        ],
        "detailId": "1942123164448325632"
    },
    {
        "title": "使用高跌倒风险的药物： 包括止痛泵/麻醉剂，抗癫药物、降压药、利尿剂、催眠药、泻药、镇静剂及精神类药物",
        "key": "使用高跌倒风险的药物： 包括止痛泵/麻醉剂，抗癫药物、降压药、利尿剂、催眠药、泻药、镇静剂及精神类药物",
        "align": "center",
        "width": "",
        "normalDetailList": [
            {
                "id": "1942123164486074368",
                "pgId": "1942123164263776256",
                "pgSrxId": "1942123164473491456",
                "detailTypeCode": "文字",
                "detailContent": "1种",
                "score": 3,
                "shortName": "",
                "rangeStart": 0,
                "rangeEnd": 0,
                "desc": null,
                "order": null
            },
            {
                "id": "1942123164494462976",
                "pgId": "1942123164263776256",
                "pgSrxId": "1942123164473491456",
                "detailTypeCode": "文字",
                "detailContent": "2种或2种以上",
                "score": 5,
                "shortName": null,
                "rangeStart": 0,
                "rangeEnd": 0,
                "desc": null,
                "order": null
            },
            {
                "id": "1942123164507045888",
                "pgId": "1942123164263776256",
                "pgSrxId": "1942123164473491456",
                "detailTypeCode": "文字",
                "detailContent": "在过去的24小时之内曾有手术镇静史",
                "score": 7,
                "shortName": null,
                "rangeStart": 0,
                "rangeEnd": 0,
                "desc": null,
                "order": null
            }
        ],
        "detailId": "1942123164494462976"
    },
    {
        "title": "患者携带的导管： 是指任何与患者相连的装置，如：静脉输液、胸腔引流管、留置导尿等",
        "key": "患者携带的导管： 是指任何与患者相连的装置，如：静脉输液、胸腔引流管、留置导尿等",
        "align": "center",
        "width": "",
        "normalDetailList": [
            {
                "id": "1942123164523823104",
                "pgId": "1942123164263776256",
                "pgSrxId": "1942123164515434496",
                "detailTypeCode": "文字",
                "detailContent": "携带1种导管",
                "score": 1,
                "shortName": "",
                "rangeStart": 0,
                "rangeEnd": 0,
                "desc": null,
                "order": null
            },
            {
                "id": "1942123164536406016",
                "pgId": "1942123164263776256",
                "pgSrxId": "1942123164515434496",
                "detailTypeCode": "文字",
                "detailContent": "携带2种导管",
                "score": 2,
                "shortName": null,
                "rangeStart": 0,
                "rangeEnd": 0,
                "desc": null,
                "order": null
            },
            {
                "id": "1942123164544794624",
                "pgId": "1942123164263776256",
                "pgSrxId": "1942123164515434496",
                "detailTypeCode": "文字",
                "detailContent": "携带3种或以上的导管",
                "score": 3,
                "shortName": null,
                "rangeStart": 0,
                "rangeEnd": 0,
                "desc": null,
                "order": null
            }
        ],
        "detailId": "1942123164536406016"
    },
    {
        "title": "活动能力",
        "key": "活动能力",
        "align": "center",
        "width": "",
        "normalDetailList": [
            {
                "id": "1942123164574154752",
                "pgId": "1942123164263776256",
                "pgSrxId": "1942123164557377536",
                "detailTypeCode": "文字",
                "detailContent": "需要辅助或监管",
                "score": 2,
                "shortName": "",
                "rangeStart": 0,
                "rangeEnd": 0,
                "desc": null,
                "order": null
            },
            {
                "id": "1942123164590931968",
                "pgId": "1942123164263776256",
                "pgSrxId": "1942123164557377536",
                "detailTypeCode": "文字",
                "detailContent": "步态不稳",
                "score": 2,
                "shortName": null,
                "rangeStart": 0,
                "rangeEnd": 0,
                "desc": null,
                "order": null
            },
            {
                "id": "1942123164603514880",
                "pgId": "1942123164263776256",
                "pgSrxId": "1942123164557377536",
                "detailTypeCode": "文字",
                "detailContent": "因视觉或听觉障碍而影响移动",
                "score": 2,
                "shortName": null,
                "rangeStart": 0,
                "rangeEnd": 0,
                "desc": null,
                "order": null
            }
        ],
        "detailId": "1942123164590931968"
    },
    {
        "title": "认知",
        "key": "认知",
        "align": "center",
        "width": "",
        "normalDetailList": [
            {
                "id": "1942123164624486400",
                "pgId": "1942123164263776256",
                "pgSrxId": "1942123164611903488",
                "detailTypeCode": "文字",
                "detailContent": "患者定向力障碍",
                "score": 1,
                "shortName": "",
                "rangeStart": 0,
                "rangeEnd": 0,
                "desc": null,
                "order": null
            },
            {
                "id": "1942123164632875008",
                "pgId": "1942123164263776256",
                "pgSrxId": "1942123164611903488",
                "detailTypeCode": "文字",
                "detailContent": "烦躁",
                "score": 2,
                "shortName": null,
                "rangeStart": 0,
                "rangeEnd": 0,
                "desc": null,
                "order": null
            },
            {
                "id": "1942123164641263616",
                "pgId": "1942123164263776256",
                "pgSrxId": "1942123164611903488",
                "detailTypeCode": "文字",
                "detailContent": "认知限制或障碍",
                "score": 4,
                "shortName": null,
                "rangeStart": 0,
                "rangeEnd": 0,
                "desc": null,
                "order": null
            }
        ],
        "detailId": "1942123164632875008"
    }
      ]
    }
  },
  setup() {
    return {};
  }
});
</script>

<style scoped>
.assessment-table-container {
  width: 100%;
  overflow-x: auto;
}

.assessment-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.assessment-table th,
.assessment-table td {
  border: 1px solid #e0e0e0;
  padding: 12px 15px;
  text-align: left;
}

.assessment-table th {
  background-color: #f5f7fa;
  font-weight: 600;
  color: #333;
}

.main-title {
  font-weight: 500;
  background-color: #f9f9f9;
}

.score-cell {
  text-align: center;
  font-weight: bold;
  color: #2c3e50;
}

/* 响应式处理 */
@media (max-width: 768px) {
  .assessment-table {
    font-size: 12px;
  }
  
  .assessment-table th,
  .assessment-table td {
    padding: 8px 10px;
  }
}
</style>